<!--
// 
// GFlex.vue
// 客户后台
// 
// 2024/10/28.
// 
-->
<template>
    <div class="GFlex" :style="style">
        <slot></slot>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";


const props = defineProps({

    row: {
        type: Boolean,
    },
    column: {
        type: Boolean,
    },
    rowReverse: {
        type: Boolean,
    },
    columnReverse: {
        type: Boolean,
    },
    justifyContentStart: {
        type: Boolean,
    },
    justifyContentCenter: {
        type: Boolean,
    },
    justifyContentEnd: {
        type: Boolean,
    },
    justifyContentBetween: {
        type: Boolean,
    },
    justifyContentAround: {
        type: Boolean,
    },
    alignItemsStart: {
        type: Boolean,
    },
    alignItemsCenter: {
        type: Boolean,
    },
    alignItemsEnd: {
        type: Boolean,
    },
    alignContentStart: {
        type: Boolean,
    },
    alignContentCenter: {
        type: Boolean,
    },
    alignContentEnd: {
        type: Boolean,
    },
    alignContentBetween: {
        type: Boolean,
    },
    alignContentAround: {
        type: Boolean,
    },
    wrap: {
        type: Boolean,
    },
    wrapReverse: {
        type: Boolean,
    },
    width: {
        type: String,
        default: "100%",
    },
    height: {
        type: String,
    },
    flex: {
        type: Number,
    },
});
const emits = defineEmits();

const style = computed(() => {
    const temp = {
        width: props.width,
        height: props.height,
    }
    if (props.row) {
        temp.flexDirection = "row"
    }
    if (props.column) {
        temp.flexDirection = "column"
    }
    if (props.rowReverse) {
        temp.flexDirection = "row-reverse"
    }
    if (props.columnReverse) {
        temp.flexDirection = "column-reverse"
    }
    //
    if (props.justifyContentStart) {
        temp.justifyContent = "flex-start"
    }
    if (props.justifyContentCenter) {
        temp.justifyContent = "center"
    }
    if (props.justifyContentEnd) {
        temp.justifyContent = "flex-end"
    }
    if (props.justifyContentBetween) {
        temp.justifyContent = "space-between"
    }
    if (props.justifyContentAround) {
        temp.justifyContent = "space-around"
    }
    //
    if (props.alignItemsStart) {
        temp.alignItems = "flex-start"
    }
    if (props.alignItemsCenter) {
        temp.alignItems = "center"
    }
    if (props.alignItemsEnd) {
        temp.alignItems = "flex-end"
    }
    //
    if (props.alignContentStart) {
        temp.alignContent = "flex-start"
    }
    if (props.alignContentCenter) {
        temp.alignContent = "center"
    }
    if (props.alignContentEnd) {
        temp.alignContent = "flex-end"
    }
    if (props.alignContentBetween) {
        temp.alignContent = "space-between"
    }
    if (props.alignContentAround) {
        temp.alignContent = "space-around"
    }
    //
    if (props.wrap) {
        temp.flexWrap = "wrap"
    }
    if (props.wrapReverse) {
        temp.flexWrap = "wrap-reverse"
    }
    //
    if (props.flex) {
        temp.flex = props.flex
    }
    return temp
})

</script>

<style scoped lang="scss">
.GFlex {
    display: inline-flex;
}
</style>